<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input
          type="text"
          class="form-control"
          placeholder="用户名"
          v-model="name"
        />
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea
          class="form-control"
          rows="6"
          placeholder="评论内容"
          v-model="content"
        ></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button
            type="button"
            class="btn btn-default pull-right"
            @click="onSubmit"
          >
          <slot>提交</slot>

          </button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "CommentAdd",
  props: {
    comments: Array,
    addCommnts: {
      type: Function,
      required: true
    }
  },
  data() {
    return { name: "", content: "" };
  },
  methods: {
    onSubmit: function() {
      const name = this.name.trim();
      const content = this.content.trim();
      if (name && content) {
        const comment = {name,content}
        //dispatch触发action
        this.$store.dispatch('addComment',comment);
      } else {
        alert("用户名或内容不能为空");
      }
      //清楚值
      this.name = "";
      this.content = "";
    },
    test: function(){
      //alert("触发子组件")
    }
  },
  mounted(){
    //子组件通过$parent访问父组件的实例
    console.log("this.$parent=",this.$parent);
    console.log(this.$parent.comments)
  }
};
</script>

<style scoped></style>
